<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<customNavBar1 :title="title"></customNavBar1>
		<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
			style="height: 450rpx;">
			<swiper-item class="swiper-items" v-for="item,index in list1 ">
				<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
			</swiper-item>
		</swiper>


		<view class="toggleCard">
			<!-- 社区互动 -->
			<view class="card" v-if="names == '社区互动'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'社区互动')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<view class="center-text">

						<u-parse :content='item.content' :tagStyle="style"></u-parse>
					</view>

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 议事广场 -->
			<view class="card" v-if="names == '议事广场'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'议事广场')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<view class="center-text">

						<u-parse :content='item.content' :tagStyle="style"></u-parse>
					</view>

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">
					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.commentNum}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.likeNum}}</text>
					</view>
				</view>
			</view>
			<!-- 文化休闲 -->
			<view class="card" v-if="names == '文化休闲'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'文化休闲')">
				<view class="card-top">
					<view class="top-left">
						<image :src="item.headUrl" mode="">
						</image>
						<view class="top-name">
							<h3>{{item.realName}}</h3>
							<span> {{item.createDate}}</span>
						</view>
					</view>
					<view>
					</view>

				</view>
				<view class="card-center">
					<view class="center-title">
						{{item.title}}
					</view>
					<!--  -->
					<view class="center-text">
						<u-parse :content='item.content' :tagStyle="style"></u-parse>
					</view>

				</view>
				<view class="card-img">
					<view class="image" v-for="ite,index in item.img">
						<image class="img" :src="ite.image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-bottom">

					<!-- 评论 -->
					<view class="card-img-two" @click.stop="review(item)">
						<image src="https://i.ringzle.com/file/20231025/6dae5c29ac9f4895a2f617ffd4d9b2b1.png"
							mode="aspectFill"></image>
						<text>{{item.review}}</text>
					</view>
					<!-- 点赞 -->
					<view class="card-img-three" @click.stop="giveALike(item)">
						<image src="https://i.ringzle.com/file/20231025/e2ac2a89b95f4408baaac3e8448d4f32.png"
							mode="aspectFill"></image>
						<text>{{item.giveALike}}</text>
					</view>
				</view>
			</view>
			<!-- 兴趣课程 -->
			<view class="card1" v-if="names == '兴趣课程'" v-for="item,index in userList" :key="index"
				@click.stop="navDtails(item,'兴趣课程')">
				<view class="left">
					<image class="image" :src="item.pic" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="one-title">
						{{item.title}}
					</view>
					<view class="two-address">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png" mode="">
						</image>
						<view>{{item.address}}</view>
					</view>
					<view class="three-certificate">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/c81ba13778a54369b826427a53729e8e.png" mode="">
						</image>
					</view>
					<view class="four-key">
						<view class="key-key">
							<view class="key" v-for="(ite,inde) in item.listType" :key="index">
								{{ite}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <uni-load-more :status="status" color="#007aff" /> -->
			<nodata v-if="userList.length === 0"></nodata>
		</view>
	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index2.vue'
	import customNavBar1 from '@/compoments/uNavBar1'
	// Vue.component('c-nav-bar1', customNavBar1);
	export default {
		components: {
			customNavBar1,
			nodata
		},
		data() {
			return {
				title: '社区互动',
				togList: [{
						name: '社区互动',
					},
					{
						name: '议事广场',
					},
					{
						name: '文化休闲',
					},
					{
						name: '兴趣课程',
					},
				],
				list1: [{
					path: 'https://fsy.shengsi.gov.cn/file/20240625/6e6f94378a574f3b8c2bb397eae41f4c.png'
				}],
				userList: [],
				show: false,
				value: '',
				status: 0,
				fromData: {
					limit: 10,
					page: 1,
					type: ''
				},
				share: null,
				popup: false,
				names: '',
				status: 'more', //加载状态
				substrings1: [],
				substrings2: [],
				substrings3: [],
				indexList: {},
				listType: [],
				style: {
					// 字符串的形式
					p: 'color:#666;font-size:30rpx; line-height: 48rpx; font-weight: Regular; 	',
					img: 'width: 0rpx;height:0rpx'
					// span: 'font-size: 30rpx'
				}
			}
		},
		//上拉加载
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading'
				// uni.showNavigationBarLoading()
				this.fromData.page++;
				this.getData(this.names)
			}
		},
		onLoad(option) {
			this.names = option.name
			this.title = option.name
			this.getList(this.names)
			this.getDict()
			this.getHousekeeping()
		},
		filters: {
			// 去除富文本标签样式
			removeHtmlStyle(html) {
				const relStyle = /style\s*?=\s*?(['"])[\s\S]*?\1/g
				const relTag = /<.+?>/g
				const relClass = /class\s*?=\s*?(['"])[\s\S]*?\1/g
				let newHtml = ''
				if (html) {
					newHtml = html.replace(relStyle, '')
					newHtml = newHtml.replace(relTag, '')
					newHtml = newHtml.replace(relClass, '')
				}
				return newHtml
			}
		},
		methods: {
			// 获取轮播图数据
			getDict() {
				this.$api.get('/sys/dict/type/all').then(res => {
					// console.log('---------', res.data);
					let dataList = res.data.data.find((p) => p.dictType == 'banner_type').dataList;
					dataList.forEach(item => {
						if (item.dictLabel == this.title) {
							this.getSwiper(item.dictValue)
						}
					})
				})
			},
			// 获取家政服务字典housekeeping type
			getHousekeeping() {
				this.$api.get('/sys/dict/type/all').then(res => {
					console.log('---------', res.data);
					this.listType = res.data.data.find((p) => p.dictType == 'housekeeping_type').dataList;
				})
			},
			// 获取轮播图数据
			getSwiper(type) {
				this.$api.get(`/sys/isappletpic/queryBannerByType/${type}`).then(res => {
					this.list1 = res.data.data.bannerList
				})
			},

			// 获取数据
			getList(name) {
				console.log('-----', name);
				this.fromData.page = 1
				if (name == "社区互动") {
					this.fromData.type = 9
					this.title = '社区互动'
					this.names = '社区互动'

					this.$api.get('/api/forum/page', this.fromData).then(res => {
						this.userList = res.data.data.list
						this.userList.forEach(item => {
							this.substrings1 = item.content.split('\n');
						})

					})
				}
				if (name == "议事广场") {
					this.fromData.type = 1
					this.title = '议事广场'
					this.names = '议事广场'

					this.$api.get('/api/forum/page', this.fromData).then(res => {
						this.userList = res.data.data.list
						this.userList.forEach(item => {
							this.substrings2 = item.content.split('\n');
						})
					})
				}
				if (name == "文化休闲") {
					this.title = '文化休闲'
					this.names = '文化休闲'
					this.fromData.type = ''

					this.$api.get('/api/culturalLeisure/page', this.fromData).then(res => {
						this.userList = res.data.data.list
						// this.userList.forEach(item => {
						// 	this.substrings3.push(item.content.split('\n'))
						// })
						// console.log(this.substrings3);
					})
				}
				if (name == "兴趣课程") {
					this.title = '兴趣课程'
					this.names = '兴趣课程'
					this.fromData.type = ''
					this.$api.get('/api/course/page', this.fromData).then(res => {
						this.userList = res.data.data.list
					})
				}

			},

			// 下拉获取数据
			getData(name) {
				let that = this
				if (name == "社区互动") {
					this.fromData.type = 9
					this.title = '社区互动'
					this.names = '社区互动'
					this.$api.get('/api/forum/page', this.fromData).then(res => {
						if (res.data.code === 0) {

							let {
								list,
								total
							} = res.data.data;
							if (that.userList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.userList = [...that.userList, ...list];
						} else that.$showToast(res.data.msg);
					})
				}
				if (name == "议事广场") {
					this.fromData.type = 1
					this.title = '议事广场'
					this.names = '议事广场'
					this.$api.get('/api/forum/page', this.fromData).then(res => {
						if (res.data.code === 0) {

							let {
								list,
								total
							} = res.data.data;
							if (that.userList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.userList = [...that.userList, ...list];
						} else that.$showToast(res.data.msg);
					})
				}
				if (name == "文化休闲") {
					this.title = '文化休闲'
					this.names = '文化休闲'
					this.fromData.type = ''
					this.$api.get('/api/culturalLeisure/page', this.fromData).then(res => {
						if (res.data.code === 0) {

							let {
								list,
								total
							} = res.data.data;
							if (that.userList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.userList = [...that.userList, ...list];
						} else that.$showToast(res.data.msg);
					})
				}
				if (name == "兴趣课程") {
					this.title = '兴趣课程'
					this.names = '兴趣课程'
					this.fromData.type = ''
					this.$api.get('/api/course/page', this.fromData).then(res => {
						if (res.data.code === 0) {

							let {
								list,
								total
							} = res.data.data;
							if (that.userList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.userList = [...that.userList, ...list];
						} else that.$showToast(res.data.msg);
					})
				}

			},
			// 去详情页面
			navDtails(item, name) {
				let obj = {
					id: item.id,
					title: name
				}
				if (name == '议事广场') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
					})
				}


				if (name == '文化休闲') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/cultureDetails?obj=' + JSON.stringify(obj)
					})
				}

				if (name == '社区互动') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails2?obj=' + JSON.stringify(obj)
					})
				}

				if (name == '兴趣课程') {
					uni.navigateTo({
						url: '/pagesService/serveDetails/interestDetails?obj=' + JSON.stringify(obj)
					})
				}

			},
			// 评论 // 去详情页面
			review(item) {
				let obj = {
					id: item.id,
					key: 0
				}
				uni.navigateTo({
					url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
				})
			},

			giveALike(item) {
				console.log('点赞', item);
				let list = {
					id: item.id,
					type: item.type
				}

				this.$api.get('/api/behavior/like', list)
					.then(res => {
						// this.getList(this.id)
						this.$showToast(res.data.data)
						if (res.data.data == '点赞成功') {
							this.likenumShow = false
							this.getList(this.names)
							this.$showToast('点赞成功')
						} else if (res.data.data == '取消成功') {
							this.$showToast('取消成功')
							this.likenumShow = true
							this.getList(this.names)
						}
					})
			},
			// 打开弹出框
			open() {},
			// 关闭弹框事件
			close() {
				this.show = false //评论弹框
				this.popup = false //分享弹框
			},
			// input事件
			change() {},
		}
	}
</script>
<style lang="less">
	.u-tabs__wrapper__nav__line {
		left: 30rpx !important;
	}

	.wxParse .p {
		margin: 0 !important;
	}

	.inline {
		width: 0 !important;
		height: 0 !important;
	}

	.u-input__content__field-wrapper {
		margin-left: 75rpx !important;
	}

	.content {
		height: 30vh;
		width: 100%;
		// display: flex;
		padding: 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.share {
			display: flex;
			align-items: center;
			text-align: center;
			padding: 20rpx;

			.weixin {
				margin-right: 20rpx;

			}

			.clear-style {
				border: none;
				border-radius: 0;
				background-color: transparent !important;
				text-align: left;
				font-size: 24rpx;
				color: #71747C;
			}

			.clear-style::after {
				border: none;
			}



		}
	}
</style>


<style lang="scss" scoped>
	.toggleCard {
		background-color: #fff;
		padding: 24rpx 36rpx;
		// height: 1000rpx;

		.toggle {
			height: 100rpx;
			// width: 2000rpx;
			background: #FFFFFF;

			.toggle-list {
				// background-color: aqua;
				margin: 0 12rpx;
				display: inline-block;
				/* 让内容水平排列，不换行 */
				/* 添加内容的样式，如内边距、外边距、宽度等 */

				.text {
					width: 136rpx;
					height: 48rpx;
					color: #363636;
					font-size: 30rpx
				}
			}

		}

		.card {
			box-sizing: border-box;
			padding: 24rpx;
			margin: 24rpx auto 24rpx;
			// margin: 0 24rpx 24rpx;
			background: #FFFFFF;
			width: 676rpx;
			border-radius: 16rpx;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);


			.card-top {
				padding: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top-left {
					display: flex;

					image {
						border-radius: 50rpx;
						width: 60rpx;
						height: 60rpx;
						margin: 0 16rpx 0 -22rpx;
					}

					.top-name {
						text-align: left;

						h3 {
							font-size: 28rpx;
							color: #333333;
						}

						span {
							font-size: 22rpx;
							color: #AAAAAA;
						}
					}

				}

				.top-time {
					// background: agba(0, 0, 0, 0.8) #1E6BFF;
					color: #00BEFF;
					font-size: 24rpx;
					background: #ebfaff;
					padding: 4rpx 16rpx;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
				}
			}

			.card-center {
				width: 625rpx;
				overflow: hidden;

				.center-title {
					color: #333333;
					// color: #363636;
					font-size: 26rpx;
					overflow-wrap: break-word;
					// color: rgba(51, 51, 51, 1);
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					text-align: left;
					white-space: nowrap;

					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;

				}

				.center-text {
					font-weight: Regular;
					margin-top: 6rpx;
					color: #666666;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;


				}
			}

			.card-img {
				display: flex;
				justify-content: space-between;

				.image {

					.img {
						width: 214rpx;
						height: 214rpx;
						background: #00BEFF;

						.img:nth-child(1) {
							border-radius: 16rpx 0rpx 0rpx 16rpx;
						}

						.img:nth-child(2) {
							border-radius: 0rpx 0rpx 0rpx 0rpx;
						}

						.img:nth-child(3) {
							border-radius: 0rpx 16rpx 16rpx 0rpx;
						}
					}
				}


			}



			.card-bottom {
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin: 32rpx 0;
				// width: 702rpx;


				.card-img-one {
					// margin: 0 44rpx;
					display: flex;
					margin: 0 auto;



					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-two {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-three {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}


			}



		}

		.card1 {
			display: flex;
			padding: 24rpx 0 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				margin-right: 20rpx;
				border-radius: 16rpx;

				.image {
					width: 204rpx;
					height: 204rpx;
				}

			}

			.right {
				.one-title {
					font-size: 36rpx;
					color: #1C1E41;
					font-weight: bold;
				}

				.two-address {
					display: flex;
					align-items: center;
					font: size 24rpx;
					color: #1C1E41;
					margin: 10rpx 0;

					.image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}

				.three-certificate {
					.image {
						width: 112rpx;
						height: 40rpx;

					}
				}

				.four-key {
					margin: 10rpx 0 10rpx;
					display: flex;
					justify-content: space-between;
					width: 475rpx;

					.key-key {
						display: flex;
					}

					.key {
						line-height: 40rpx;
						display: flex;
						margin-right: 8rpx;
						font-size: 22rpx;
						padding: 6rpx 6rpx;
						color: #874D29;
						border: 1rpx solid #EBC9B8;
					}

					.price {
						font-size: 40rpx;
						color: #FD3939;
					}
				}
			}
		}

		.card2 {
			padding: 24rpx 0 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.one-title {
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 32rpx;
					color: #333333;
					font-weight: Bold;
				}

				.right {
					font-size: 32rpx;
					color: #FF4141;
					font-weight: Bold;
				}
			}

			.two-address {
				display: flex;
				align-items: center;
				font: size 24rpx;
				color: #1C1E41;
				margin: 24rpx 0 20rpx;
				font-weight: Regular;

				.image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}

			.four-key {
				margin: 20rpx 0 36rpx;

				display: flex;

				.key {
					display: flex;
					margin-right: 12rpx;
					font-size: 22rpx;
					padding: 6rpx 12rpx;
					color: #874D29;
					border: 1rpx solid #EBC9B8;
				}
			}

			.five-user {
				display: flex;
				justify-content: space-between;

				.five-user-left {
					display: flex;

				}

				.left {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.center {
					margin: 0 20rpx;

					.one {
						font-size: 28rpx;
						color: #333333;
						font-weight: Bold;
					}

					.two {
						font-size: 26rpx;
						color: #808080;
						font-weight: Regular;
					}
				}

				.right {
					border-radius: 50rpx;
					border: 1rpx solid #007A69;
					color: #007A69;
					text-align: center;
					line-height: 64rpx;
					width: 148rpx;
					height: 64rpx;
					font-weight: Regular;
				}

			}

		}

		.card3 {
			display: flex;
			padding: 24rpx 0 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				margin-right: 20rpx;
				border-radius: 16rpx;

				.image {
					width: 288rpx;
					height: 204rpx;
				}

			}

			.right {
				padding: 10rpx 0;

				.one-title {
					font-size: 32rpx;
					color: #1C1E41;
					font-weight: Bold;
				}

				.two-address {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #1C1E41;
					margin: 16rpx 0;
					font-weight: Regular;

				}


			}
		}

	}
</style>